<template>
    <div>
        <div class="header">
            <div class="content">
                <van-icon name="arrow-left" />
                <span>我的</span>
                <van-icon @click="showBottom=true" name="ellipsis" />
            </div>
            <div class="user">
                <img src="https://foruda.gitee.com/avatar/1715931924378943527/5352827_adnaan_1715931924.png!avatar200"
                    alt="">
                <div class="info">
                    <div class="name">小明</div>
                    <div class="desc">这个人很懒，什么都没有留下</div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="tools-card">
                <van-grid square>
                    <van-grid-item @click="router.push('/myPlan')" icon="todo-list-o" text="我的规划" />
                    <van-grid-item @click="router.push('/schedule')" icon="logistics" text="预约旅程" />
                    <van-grid-item @click="router.push('/historyTs')" icon="orders-o" text="历史翻译" />
                    <van-grid-item @click="router.push('/healthInfo')" icon="certificate" text="健康信息" />
                </van-grid>
            </div>
            <div class="menu">
                <van-cell-group inset>
                    <van-cell icon="contact" @click="router.push('/userInfo')" title="个人信息" is-link />
                    <van-cell icon="question" @click="router.push('/about')" title="关于我们" is-link />
                    <van-cell icon="service" @click="router.push('/contact')" title="联系我们" is-link />
                </van-cell-group>
            </div>
        </div>
        <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '15%', padding: '20px' }">
            <template #default>
                <div>
                    <van-button type="danger" block>退出登录</van-button> 
                </div>
            </template>
            </van-popup>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter();
const showBottom = ref(false)
</script>

<style scoped>
.header {
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    height: 200px;
    background: linear-gradient(to bottom, #0066ff 30%, #00aeff 80%);
}

.header .content {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

.header .user {
    display: flex;
    align-items: center;
    margin-top: 10px;
    padding: 0 10px;
    height: 100px;
}

.header .user img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid #fff;
    margin-right: 10px;
}

.header .user .info {
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 80px;
    font-size: 14px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header .user .info .name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.content .tools-card {
    width: 90%;
    margin: 0 auto;
    margin-top: -30px;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px 10px 0 0;
}
</style>